﻿(function () {
    "use strict";
    var appView = Windows.UI.ViewManagement.ApplicationView;
    var appViewState = Windows.UI.ViewManagement.ApplicationViewState;
    var nav = WinJS.Navigation;
    var ui = WinJS.UI;

    ui.Pages.define("/pages/groupedItems/groupedItems.html", {
        // This function is called to initialize the page.
        init: function (element, options) {
            this.groupHeaderInvoked = ui.eventHandler(this._groupHeaderInvoked.bind(this));
            this.itemInvoked = ui.eventHandler(this._itemInvoked.bind(this));
        },

        // This function is called whenever a user navigates to this page.
        ready: function (element, options) {
            var listView = element.querySelector(".groupeditemslist").winControl;
            listView.itemTemplate = this.renderItem;
            this._initializeLayout(listView, appView.value);
        },

        groupInfo: function () {
            return {
                enableCellSpanning: true,

                cellWidth: 1 + 11,
                cellHeight: 1 + 10.7
            };
        },

        computeItemSize: function (index) {

            var size = {
                width: 230,
                height: 275
            };

            if (index != null) {
                var key = Data.items._dataSource._list._sortedKeys[index];
                var item = Data.items._groupedItems[key].data;

                if (typeof (index) === "number") {
                    if (window.innerWidth >= 2560 && window.innerHeight >= 1440) {           //Full 2560x1440(16:9) / Letterbox 2560x1600(16:10)
                        if (item.isBig) {

                            size.width = 820;
                            size.height = 1060;
                        }
                        else {
                            size.width = 440;
                            size.height = 440;
                        }
                    }
                    else if (window.innerWidth >= 1920 && window.innerHeight >= 1080) {           //Full 2560x1440(16:9) / Letterbox 2560x1600(16:10)
                        if (item.isBig) {

                            size.width = 560;
                            size.height = 770;
                        }
                        else {
                            size.width = 330;
                            size.height = 330;
                        }
                    }
                    else {
                        if (item.isBig) {

                            size.width = 424;
                            size.height = 530;
                        }
                        else {
                            size.width = 224;
                            size.height = 220;
                        }
                    }

                }
            }

            return size;
        },
        renderItem: function (item, recycledElement) {
            var renderer = document.querySelector(".itemtemplate");

            if (item._value.__proto__.data.isBig) {
                renderer = document.querySelector(".BigBoxTemplate");
            }
            else {
                renderer = document.querySelector(".itemtemplate");
            }


            if (renderer.renderItem != null)
                return renderer.renderItem.call(this, item, recycledElement);
            else
                return renderer;
        },
        // This function updates the page layout in response to viewState changes.
        updateLayout: function (element, viewState, lastViewState) {
            /// <param name="element" domElement="true" />

            var listView = element.querySelector(".groupeditemslist").winControl;
            if (lastViewState !== viewState) {
                if (lastViewState === appViewState.snapped || viewState === appViewState.snapped) {
                    var handler = function (e) {
                        listView.removeEventListener("contentanimating", handler, false);
                        e.preventDefault();
                    }
                    listView.addEventListener("contentanimating", handler, false);
                    this._initializeLayout(listView, viewState);
                }
            }
        },

        _groupHeaderInvoked: function (args) {
            var group = Data.groups.getAt(args.detail.groupHeaderIndex);
            nav.navigate("/pages/groupDetail/groupDetail.html", { groupKey: group.key });
        },

        _itemInvoked: function (args) {
            var item = Data.items.getAt(args.detail.itemIndex);
            nav.navigate("/pages/itemDetail/itemDetail.html", { item: Data.getItemReference(item) });
        },

        _initializeLayout: function (listView, viewState) {
            /// <param name="listView" value="WinJS.UI.ListView.prototype" />

        if (viewState === appViewState.snapped) {
            listView.itemDataSource = Data.groups.dataSource;
            listView.groupDataSource = null;
            listView.layout = new ui.ListLayout();
        } else {
            listView.itemDataSource = Data.items.dataSource;
            listView.groupDataSource =Data.groups.dataSource;
            listView.layout = new ui.GridLayout({
                groupHeaderPosition: "top",
                groupInfo: this.groupInfo,
                itemInfo: this.computeItemSize
            });
        }
    },
    });
})();
